/* iconfont */
@font-face {
  font-family: "iconfont"; /* Project id 4883501 */
  src: url('//at.alicdn.com/t/c/font_4883501_6r6siw36ahs.woff2?t=1758181652697') format('woff2'),
       url('//at.alicdn.com/t/c/font_4883501_6r6siw36ahs.woff?t=1758181652697') format('woff'),
       url('//at.alicdn.com/t/c/font_4883501_6r6siw36ahs.ttf?t=1758181652697') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-keyboard-delete:before {
  content: "\e605";
}

.icon-persons:before {
  content: "\e618";
}

.icon-location:before {
  content: "\e8ff";
}

.icon-trade:before {
  content: "\e61d";
}

.icon-merchant:before {
  content: "\e6ad";
}

.icon-rili:before {
  content: "\e61c";
}

.icon-search:before {
  content: "\e752";
}

.icon-bill:before {
  content: "\e894";
}

.icon-invoice:before {
  content: "\e604";
}

.icon-qrcode2:before {
  content: "\e716";
}

.icon-camera:before {
  content: "\e645";
}

.icon-addbankcard:before {
  content: "\e644";
}

.icon-add:before {
  content: "\e65b";
}

.icon-tick:before {
  content: "\e62d";
}

.icon-Logout:before {
  content: "\e603";
}

.icon-dikou:before {
  content: "\e619";
}

.icon-login:before {
  content: "\e602";
}

.icon-close:before {
  content: "\e652";
}

.icon-phone:before {
  content: "\e607";
}

.icon-more:before {
  content: "\e650";
}

.icon-qrcode:before {
  content: "\eaf1";
}

.icon-keyboard:before {
  content: "\e91c";
}

.icon-rmb:before {
  content: "\e634";
}

.icon-mine:before {
  content: "\e601";
}

.icon-home:before {
  content: "\e600";
}

.icon-wallet:before {
  content: "\e63d";
}







/* 公共样式 */
@import "@/static/scss/variables.scss";

.main-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  bottom: calc(0px + constant(safe-area-inset-bottom));
  bottom: calc(0px + env(safe-area-inset-bottom));
  background-color: $colorSubBg;
  font-size: $fontSize;
  padding: 3vw;
  overflow-y: auto;
}

.submit-btn {
  position: absolute;
  bottom: calc(3vw);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 5vw;
  border-radius: 1vw;
  background-color: $colorPrimary;
  color: white;
  width: calc(100vw - 3vw * 2);
  height: calc(5vw + 3.5vw * 2);
}
.submit-btn:active {
  opacity: 0.75;
}
.submit-btn.is-diabled {
  opacity: 0.5 !important;
}

.page-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.btn-submit {
  position: absolute;
  width: 90vw !important;
  height: 10vw !important;
  bottom: 5vw;
  bottom: calc(5vw + constant(safe-area-inset-bottom));
  bottom: calc(5vw + env(safe-area-inset-bottom));
}

.is-unactived {
  opacity: 0.75;
}

// 弹窗选择器
.choose-tool-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.5);

  .choose-tool-body {
    position: absolute;
    border-radius: 1vw;
    width: 100vw;
    display: flex;
    flex-direction: column;
    bottom: 0px;

    .choose-tool-title {
      background-color: $colorPrimary;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 3.5rem;
      font-size: 32rpx;
      font-weight: 700;
      color: white;
      border-radius: 3vw 3vw 0 0;
    }

    .choose-tool-title-btn {
      position: absolute;
      right: 3vw;
      display: flex;
      align-items: center;
      font-size: 12px;
      font-weight: normal;
      .iconfont {
        font-size: 12px;
        padding: 1px 1px 0 0;
      }
    }

    .choose-tool-item-box {
      max-height: 50vh;
      overflow: auto;
      padding-bottom: 5vh;
      padding-bottom: calc(5vh + constant(safe-area-inset-bottom));
      padding-bottom: calc(5vh + env(safe-area-inset-bottom));
      background-color: white;

      .choose-tool-item {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 4rem;
        font-size: $fontSize;
        // color: white;
        padding: 0 1rem 0 1rem;
      }

      .choose-tool-item + .choose-tool-item {
        border-top: 1px rgb(235, 235, 235) solid;
      }
    }
  }
}

// 渐变弹窗 - 选择器
.transition-choose-tool-box {
  border-radius: 1vw;
  width: 100vw;
  max-height: 70vh;
  display: flex;
  flex-direction: column;

  .transition-choose-tool-title {
    background-color: $colorPrimary;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    border-radius: 3vw 3vw 0 0;
  }

  .transition-choose-tool-item-box {
    max-height: 50vh;
    overflow: auto;
    padding-bottom: 0px;
    padding-bottom: calc(0px + constant(safe-area-inset-bottom));
    padding-bottom: calc(0px + env(safe-area-inset-bottom));
    background-color: white;

    .transition-choose-tool-item {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      flex-direction: column;
      min-height: 4rem;
      font-size: 1rem;
      padding: 0 1rem 0 1rem;
    }
    .transition-choose-tool-item.selected {
      color: #909399;
    }

    .transition-choose-tool-item + .transition-choose-tool-item {
      border-top: 1px $colorSubBg solid;
    }
  }
}

.tag-type-info,
.tag-type-info-plain {
  font-size: 12px;
  padding: 1px 5px 2px 5px !important;
  border-radius: 4px;
  background-color: #f4f4f5;
  color: #909399;
}
.tag-type-info-plain {
  padding: 0px 4px 1px 4px !important;
  border: 1px #e9e9eb solid;
  background-color: transparent;
}
.tag-type-warning,
.tag-type-warning-plain {
  font-size: 12px;
  padding: 1px 5px 2px 5px !important;
  border-radius: 4px;
  background-color: $colorWarningLight3;
  color: $colorWarning;
}
.tag-type-warning-plain {
  padding: 0px 4px 1px 4px !important;
  border: 1px #ffe3cc solid;
  background-color: transparent;
}
.tag-type-success,
.tag-type-success-plain {
  font-size: 12px;
  padding: 1px 5px 2px 5px !important;
  border-radius: 4px;
  background-color: $colorSuccessLight3;
  color: $colorSuccess;
}
.tag-type-success-plain {
  padding: 0px 4px 1px 4px !important;
  border: 1px #9de5bd solid;
  background-color: transparent;
}
.tag-type-danger,
.tag-type-danger-plain {
  font-size: 12px;
  padding: 1px 5px 2px 5px !important;
  border-radius: 4px;
  background-color: #feecec;
  color: #f64041;
}
.tag-type-danger-plain {
  padding: 0px 4px 1px 4px !important;
  border: 1px #fbb3b3 solid;
  background-color: transparent;
}
.tag-type-primary,
.tag-type-primary-plain {
  font-size: 12px;
  padding: 1px 5px 2px 5px !important;
  border-radius: 4px;
  background-color: $colorBlueLight3;
  color: $colorBlueLight;
}
.tag-type-primary-plain {
  padding: 0px 4px 1px 4px !important;
  border: 1px #99baf0 solid;
  background-color: transparent;
}

// 紫色
.tag-type-purple,
.tag-type-purple-plain {
  font-size: 12px;
  padding: 1px 5px 2px 5px !important;
  border-radius: 4px;
  background-color: #f5ecfe;
  color: #8040f6;
}
.tag-type-purple-plain {
  padding: 0px 4px 1px 4px !important;
  border: 1px #dbb3fb solid;
  background-color: transparent;
}

.custom-gui-modal-body {
  background-color: $colorSubBg;
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;

  view {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .custom-gui-modal-body-row {
      color: $colorMinorFont;
      font-size: 0.8rem;
      line-height: 1.25rem;
    }
  }
}
.modal-btns {
  line-height: 88rpx;
  font-size: 26rpx;
  text-align: center;
  width: 200rpx;
}

// 隐私协议
.privacy-policy {
  margin: 5vw 0 0 0;
  width: 90vw !important;
  font-size: 0.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.privacy-policy .link {
  color: $colorPrimary;
}

.privacy-policy-content {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;

  .body-box {
    border-radius: 4px;
    background-color: white;
    padding: 5vw;
    width: 75vw;

    .title-box {
      font-weight: bolder;
      font-size: 1.3rem;
      color: black;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 0 5vw 0;
    }

    .content-box {
      font-size: 0.75rem;
      max-height: 60vh;
      overflow-y: auto;
      white-space: pre-line;
      color: $colorMainFont;
    }

    .btn-box {
      padding: 5vw 0 0 0;
      display: flex;
      justify-content: center;
      align-items: center;

      .btn-info {
        width: 30vw !important;
        color: $colorMinorFont;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .btn-box button {
      width: 30vw !important;
      border-radius: 5vw !important;
    }
  }
}

checkbox-group label {
  display: flex;
  justify-content: center;
  align-items: center;
}

// 弹窗
.my-dlg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1111;

  .dlg-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;

    .dlg-body {
      position: relative;
      width: 600rpx;
      background: #fff;
      border-radius: 16rpx;
      overflow: hidden;

      .dlg-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 32rpx;
        border-bottom: 1rpx solid rgb(235, 235, 235);

        .dlg-title {
          font-size: 32rpx;
          font-weight: 600;
          color: #333;
        }

        .icon-close {
          font-size: 36rpx;
          color: #999;
          padding: 16rpx;

          &:active {
            color: #666;
          }
        }
      }

      .dlg-content {
        padding: 3vw;
        min-height: 100rpx;
        font-size: $fontSize;
        color: #666;
        line-height: 1.6;
        overflow-y: auto;
      }

      .dlg-footer {
        view {
          display: flex;
          .dlg-footer-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50%;
            padding: $minFontSize 0;
            font-size: $fontSize;
            color: #333;

            &:first-child {
              border-right: 1rpx solid rgb(235, 235, 235);
              color: #666;
              background-color: rgb(235, 235, 235);
            }

            &:last-child {
              color: white;
              background-color: $colorPrimary;
            }

            &:active {
              opacity: 0.85;
            }
          }
        }
      }
    }
  }
}

.input-container {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;

  // 输入框标签
  .input-label {
    margin-bottom: 5px;
    font-size: $fontSize;
    color: $colorNormalFont;
    font-weight: bold;
  }

  // 输入框本身
  .input-field {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: $fontSize;
    color: $colorNormalFont;
    background-color: #fff;

    &:focus {
      border-color: #007aff; // 聚焦时的边框颜色
      outline: none;
    }
  }

  .only-text {
    padding: 5px 10px;
    font-size: $fontSize;
    color: $colorNormalFont;
  }

  .btn-input {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;

    .input-field {
      width: 100%;
    }

    .btn {
      height: calc(1.4rem + 20px + 2px);
      width: calc(#{$fontSize} * 7);
      min-width: calc(#{$fontSize} * 8);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: $fontSize;
      line-height: $fontSize;
      border-radius: 1vw;
      background-color: $colorPrimary;
      color: white;
      margin: 0 0 0 2vw;
      white-space: nowrap;
    }
    .btn.is-disabled {
      opacity: 0.6;
    }
  }
}
.input-container:last-child {
  margin-bottom: 5px;
}

// 没有列表数据时，放一个占位符提示一下
.no-data {
  display: flex;
  align-items: center;
  justify-content: center;
  color: $colorPlaceholderFont;
  font-size: 45rpx;
  padding: 10vw 0;
}

.input-placeholder {
  color: #999;
  font-size: $fontSize;
}

.is-placeholder {
  color: rgb(126, 126, 126);
}

.color-primary {
  color: $colorPrimary !important;
}

.color-success {
  color: $colorSuccess !important;
}

.color-warning {
  color: $colorWarning !important;
}

.color-danger {
  color: $colorDanger !important;
}

.color-info {
  color: $colorMinorFont !important;
}

.color-info2 {
  color: $colorSubBg !important;
}
